<script setup>
import { ref, onMounted, watch, computed, onBeforeMount } from 'vue'
import { generateUUID, go2Link, go2Router, refresh } from '@/plugins/util.js'
import { useRouter } from 'vue-router'
import { useConfirm } from '@/composition/useConfirm'
import { useToast } from '@/composition/useToast'


const { successToast, errorToast, infoToast } = useToast();

const { showConfirm } = useConfirm()
const router = useRouter();
const isMenuShow = ref(false)
const menu = ref([
    {
        uuid: generateUUID(),
        icon: '',
        title: '主页',
        to: 'home'
    },
    {
        uuid: generateUUID(),
        icon: '',
        title: '账号管理',
        to: 'user'
    },
    {
        uuid: generateUUID(),
        icon: '',
        title: '个性主题',
        to: 'style'
    },
    // {
    //     uuid:generateUUID(),
    //     icon: '',
    //     title: 'Logo设置',
    //     to: 'logo'
    // },
    {
        uuid: generateUUID(),
        icon: '',
        title: '快捷导航',
        to: 'guide'
    },
    {
        uuid: generateUUID(),
        icon: '',
        title: '搜索引擎',
        to: 'searchEngine'
    },
    // {
    //     uuid: generateUUID(),
    //     icon: '',
    //     title: '用户信息',
    //     to: 'userInfo'
    // },
    {
        uuid: generateUUID(),
        icon: '',
        title: '清理缓存',
    },
    {
        uuid: generateUUID(),
        icon: '',
        title: '关于&反馈',
        href: 'https://support.qq.com/products/170200'
    },
])


const menuList = ref()


const handlerClick = (e) => {
    let list = document.querySelector("#menus");
    // let list = this.$refs.menuList;
    if (!list || !list.contains(e.target)) {
        menuHide();
    }
}


const menuShow = () => {
    if (menuList.value) {
        let style = menuList.value.style;
        style.transform = 'translateX(0)';
        isMenuShow.value = true;
    }

}
const menuHide = () => {
    if (menuList.value) {
        let style = menuList.value.style;
        style.transform = 'translateX(-100%)';
        isMenuShow.value = false;
    }
}
const goTo = (index) => {
    let item = menu.value[index];
    // this.$store.commit('uEditIndexShow', false);
    if (item.to) {
        if (item.to === 'index') {
            // this.$store.commit('uEditIndexShow', true);
            go2Router('home');
        } else {
            go2Router(item.to);
        }
    } else if (item.href) {
        go2Link(item.href, '_target')
    } else {
        if (item.title == '清理缓存') {
            showConfirm({ content: '确认清理缓存吗？' }).then(() => {
                clearCache();
            }).catch(() => { })
        }
    }
    menuHide();
}

const clearCache = () => {
    localStorage.clear();
    successToast('清理缓存成功，即将刷新页面...')
    setTimeout(() => {
        window.location.reload()
    }, 1000);
}


watch(isMenuShow, () => {
    document.removeEventListener("click", handlerClick);
    if (isMenuShow.value) {
        document.addEventListener("click", handlerClick);
    }
});


</script>

<template>
    <div :class="`z-10 fixed ${isMenuShow ? 'inset-0' : ''}`">
        <div id="menus">
            <!-- bg-white bg-opacity-20 hover:bg-opacity-50-->
            <div class="bg-white bg-opacity-20 hover:bg-opacity-50 fixed left-4 top-2 text-lg px-2 shadow-xl rounded  cursor-pointer transition"
                @click="menuShow" v-show="!isMenuShow">
                <i class="fa fa-bars"></i>
            </div>

            <!-- border-r-2 border-gray-50 border-opacity-10 shadow-xl bg-white bg-opacity-80 -->
            <div class="border-r-2 border-gray-50 border-opacity-10 shadow-xl bg-white bg-opacity-90 fixed left-0 top-0 bottom-0 w-1/2 md:w-80  
                transition transform-gpu -translate-x-full" ref="menuList">
                <div class="cursor-pointer mt-10 flex justify-center animate-bounce" @click="refresh()">
                    <i class="fa fa-search text-5xl"></i>
                </div>
                <ul class="mt-5">
                    <li v-for="(item, index) in menu" :key="item.uuid" :index="index" @click="goTo(index)"
                        class="flex py-4 text-sm cursor-pointer transition text-center hover:bg-green-500">
                        <div class="w-full flex justify-center">{{ item.title }}</div>
                    </li>
                </ul>
            </div>
        </div>


    </div>
</template>

<style scoped></style>
